<template>
  <!-- 添加视频 -->
  <div class="wdsp">
    <div class="row">
      <div class="line"></div>
      <div>添加视频</div>
      <div class="iconfont icon-close" @click="goBack()">&#xe608;</div>
    </div>
    <!-- 自动发布 -->
    <!-- <div class="row">
      <div class="line"></div>
      <div>添加视频</div>
      <div class="iconfont icon-close" @click="goBack()">&#xe608;</div>
    </div> -->


    <!-- 左侧 tab切换 -->

    <div class="tab-item">
      <div class="vertical-tab-block">
        <my-tabs-vertical
          :value.sync="activeTabVal"
          :list="tabList"
        ></my-tabs-vertical>
      </div>
      <!-- 左侧 tab切换 | 第一步 -->
      <div v-if="activeTabVal == 1" class="vertical-tab-item">
        <my-complex-form
          :formData="step_1"
          @changeFormData="changeFormData($event, 'step_1')"
          @handleClickBtn="handleClickBtn($event, 'step_1')"
        ></my-complex-form>
      </div>
      <!-- 左侧 tab切换 | 第二步 -->
      <div v-if="activeTabVal == 2" class="vertical-tab-item">
        <my-complex-form
          :formData="step_2"
          @changeFormData="changeFormData($event, 'step_2')"
          @handleClickBtn="handleClickBtn($event, 'step_2')"
        ></my-complex-form>
      </div>
      <!-- 左侧 tab切换 | 第三步 -->
      <div v-if="activeTabVal == 3" class="vertical-tab-item">
        <!-- 左 -->
        <div class="left">
          <my-complex-form
            :formData="step_3"
            @changeFormData="changeFormData($event, 'step_3')"
          ></my-complex-form>
        </div>
        <!-- 右 -->
        <div class="right">
          <!-- 筛选条件 -->
          <div class="my-simple-form">
            <div
              v-for="(item, key) in simpleForm"
              :key="key"
              class="simple-form-item"
            >
              <!-- input -->
              <div
                v-if="item.type == 'input' && !item.hidden"
                class="input-block"
              >
                <input
                  type="text"
                  :value="item.value"
                  :placeholder="item.placeholder"
                  class="input"
                  @input="onInput($event, key)"
                />
              </div>
              <!-- select -->
              <div
                v-if="item.type == 'select' && !item.hidden"
                class="select-block"
              >
                <el-select
                  :value="item.value"
                  :placeholder="item.placeholder"
                  @change="onSelect($event, key)"
                >
                  <el-option
                    v-for="op in item.list"
                    :key="op.value"
                    :label="op.label"
                    :value="op.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div class="search-block" @click="search">
              <div class="iconfont icon">&#xe66e;</div>
            </div>
          </div>
          <!-- 列表 -->
          <div class="user-list" @scroll="scroll">
            <div
              v-for="(item, index) in userList"
              :key="index"
              class="list-item"
            >
              <div class="user-avatar">
                <img :src="item.avatar" alt="" class="avatar" />
              </div>
              <div class="user-info">
                <div class="user-row user-name">{{ item.nickname }}</div>
                <div class="user-row">
                  <div class="text">{{ getType(item.type) }}</div>
                  <div class="line"></div>
                  <div class="text">授权状态</div>
                  <div
                    class="circle"
                    :class="getStatus(item.note, item.status) ? 'suc' : 'err'"
                  ></div>
                  <div class="text">
                    {{ getStatus(item.note, item.status) ? "正常" : "异常" }}
                  </div>
                </div>
                <div class="mark" @click="handleClickRow(item)">
                  <div v-if="getChecked(item)" class="iconfont icon">
                    &#xe604;
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 下一步 上一步 提交 重置 -->
    <div class="form-btn-list">
      <my-button v-if="activeTabVal > 1" bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="prev"
        >上一步</my-button
      >
      <my-button v-if="activeTabVal < 3" bgc="#fff" border="#DCDCDF" fontColor="#CB8CF5" @click="next"
        >下一步</my-button
      >
      <my-button v-if="activeTabVal == 3" bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="confirm"
        >确认</my-button
      >
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="reset"
        >重置</my-button
      >
    </div>
    <!-- ---------------- 弹窗 ---------------- -->
    <el-dialog
      :visible.sync="step_1.poi_name.show"
      width="50%"
      :show-close="false"
    >
      <div class="header">
        <div class="label">地点</div>
        <div class="iconfont icon-close" @click="step_1.poi_name.show = false">
          &#xe61d;
        </div>
      </div>
      <div class="body">
        <div class="search-block">
          <my-form :list="placeQuery" @changeFormData="changeForm"></my-form>
          <my-button
            bgc="#fff"
            border="#DCDCDF"
            fontColor="#387CF7"
            @click="searchPlace"
            style="margin-left: 15px"
            >搜索</my-button
          >
        </div>
        <div class="place-list">
          <div
            v-for="(radio, index) in step_1.poi_name.list"
            :key="index"
            class="list-item"
            @click="handleClickDialogRadio(radio)"
          >
            <div
              class="radio"
              :class="{
                active: radio.poi_id == step_1.poi_name.value.poi_id,
              }"
            ></div>
            <div class="label">
              <div class="name">{{ radio.poi_name }}</div>
              <div class="city">{{ radio.address }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="step_1.poi_name.show = false"
          >关闭</my-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import myButton from "@/components/myButton.vue";
import myComplexForm from "@/components/myComplexForm.vue";
import myTabs from "@/components/myTabs.vue";
import myTabsVertical from "@/components/myTabsVertical.vue";
import myForm from "@/components/myForm.vue";
import data from "@/data/wdsp.js";
import option from "@/data/option.js";
export default {
  components: {
    myButton,
    myForm,
    myComplexForm,
    myTabs,
    myTabsVertical,
  },
  data() {
    return {
      step_1: data.step_1, // 第一步
      step_2: data.step_2, // 第二步
      step_3: data.step_3, // 第三步
      placeQuery: {
        keyword: {
          type: "input",
          label: "名称",
          value: "",
          placeholder: "请输入名称",
        },
        city: {
          type: "input",
          label: "城市",
          value: "",
          placeholder: "请输入城市",
        },
      }, // 地点弹窗搜索条件
      simpleForm: data.simpleForm,

      activeTabVal: 1,
      tabList: data.tabList,
      total: 0,
      limit: 15,
      currentPage: 1,
      userList: [],
      formData: {},
      loading: false,
      noMore: false,
      tmpl: JSON.parse(window.sessionStorage.getItem("tmpl")),
    };
  },
  watch: {
    // 当开启或关闭 伪原创
    "step_2.wyc_open": {
      handler(val) {
        if (!val.hidden) {
          this.step_2.wyc_music.hidden = val.value.value == 1 ? false : true;
        }
      },
      deep: true,
    },
    // 当切换 地点 小程序
    "step_1.placeOrApp": {
      handler(val) {
        this.step_1.poi_name.hidden = val.value.value == 1 ? false : true;
        this.step_1.app.hidden = val.value.value == 1 ? true : false;
      },
      deep: true,
    },
    // 当选择关键词
    "step_1.keywords": {
      handler(val) {
        if (val.value) {
          // 标题 zhuci + 随机 后缀 + 空格
          if (this.keywords.houzhui && this.keywords.houzhui.length) {
            let random_houzhui = Math.round(
              Math.random() * (this.keywords.houzhui.length - 1)
            );
            this.step_1.title.value =
              val.value +
              " " +
              val.value +
              this.keywords.houzhui[random_houzhui];
          }
          // 话题  #随机 diqu + zhuici  + 空格
          if (this.keywords.diqu && this.keywords.diqu.length) {
            let random_diqu;
            let tags = "";
            for (let i = 0; i < 3; i++) {
              random_diqu = Math.round(
                Math.random() * (this.keywords.diqu.length - 1)
              );
              tags =
                tags + "#" + this.keywords.diqu[random_diqu] + val.value + " ";
            }

            this.step_1.tags.value = tags;
          }
        }
      },
      deep: true,
    },
    // 当点击 我的账号发布 账号市场发布
    "step_3.toggle": {
      handler(val) {
        // option.vedioTypeList
        this.currentPage = 1;
        this.userList = [];
        this.simpleForm.hangye.value = "";
        this.simpleForm.nickname.value = "";
        this.simpleForm.type.value = "douyin";
        // 我的账号发布
        if (val.value.value == 0) {
          this.simpleForm.type.list = option.vedioTypeList;
          this.getMyUserList1();
          this.simpleForm.hangye.hidden = true;
        }
        // 账号市场发布
        if (val.value.value == 1) {
          this.simpleForm.type.list = option.vedioTypeList.filter(
            (v) => v.value == "douyin" || v.value == "kuaishou"
          );
          this.getMyUserList2();
          this.simpleForm.hangye.hidden = false;
        }
      },
      deep: true,
      immediate: true,
    },
    // 当选择用户中 包含bilibili 用户时
    "step_3.account": {
      handler(val) {
        let bili = val.value.find((v) => v.type == "bilibili");
        this.step_3.bilitid.hidden = bili ? false : true;
      },
      deep: true,
    },
  },

  mounted() {
    this.getKeywords();
    this.getIndustryList();
    this.getChannelList();
    if (this.$route.query.activeTabVal) {
      this.activeTabVal = this.$route.query.activeTabVal;
    }
    if (this.tmpl) {
      this.step_2.tpldata.hidden = false;
      this.step_2.tpldata.value = this.tmpl;
    } else {
      this.step_2.tpldata.hidden = true;
    }
  },
  methods: {
    changeForm(res) {
      this.tableQuery[res.key].value = res.val;
    },
    // 获取行业分类列表
    async getIndustryList() {
      let data = await this.$api.drsc_industryList();
      let industryList = [];
      for (let key in data) {
        industryList.push({
          label: data[key],
          value: key,
        });
      }
      this.simpleForm.hangye.list = industryList;
    },
    async getKeywords() {
      let resKeyword = await this.$api.wdsp_getKeywordOrUserList({
        type: "keyword",
      });
      this.keywords = resKeyword.data;
      this.step_1.keywords.list = resKeyword.data.zhuci.map((v, i) => {
        return {
          label: v,
          value: v,
        };
      });
      let resUser = await this.$api.wdsp_getKeywordOrUserList({
        type: "auser",
      });
      resUser.data.forEach((v) => {
        v.label = v.nickname;
        v.value = v.open_id;
      });
      this.step_1.atuser.list = resUser.data;
      this.step_1.atuser.list.unshift({
        label: "请选择一个需要@的账号(仅抖音支持)",
        value: "",
      });
      this.step_1.notice.html[
        "3"
      ] = `<span>您已发布视频 ${resKeyword.data.videonum}/${resKeyword.data.videolimit}。</span>`;
    },
    // 搜索地点
    async searchPlace() {
      let reqBody = {};
      for (let key in this.placeQuery) {
        if (this.placeQuery[key].value == "") {
          return this.$message(`请输入${this.placeQuery[key].label}`);
        }
        reqBody[key] = this.placeQuery[key].value;
      }
      let res = await this.$api.wdsp_searchPlace(reqBody);
      this.step_1.poi_name.list = res.data;
    },

    changeFormData(result, dataName) {
      if (result.k) {
        this[dataName][result.key].list[result.k].value = result.value;
      } else {
        this[dataName][result.key].value = result.value;
      }
      if (result.progress) {
        this[dataName][result.key].progress = result.progress;
      }
    },
    // 点击表单中的按钮
    handleClickBtn(key, dataName) {
      // 如果点击地点的 选择按钮
      if (key == "poi_name") {
        this[dataName][key].show = true;
      }
      if (key == "bendi") {
        this.step_2.video.hidden = false;
        this.step_2.wyc_open.hidden = false;
        this.step_2.wyc_music.hidden = false;
      }
      if (key == "muban") {
        this.step_2.video.hidden = true;
        this.step_2.wyc_open.hidden = true;
        this.step_2.wyc_music.hidden = true;
        this.$router.push({
          path: "/wdsp/tmpl",
          query: { activeTabVal: this.activeTabVal },
        });
      }
    },
    // 点击弹窗的单选框
    handleClickDialogRadio(radio) {
      this.step_1.poi_name.value = radio;
      this.step_1.poi_name.show = false;
    },
    // 点击 我的账号发布 账号市场发布 某一行
    handleClickRow(row) {
      let arr = JSON.parse(JSON.stringify(this.step_3.account.value));
      // 先去找有没有相同id的
      let same = arr.find((v) => v.id == row.id);
      // 如果没有 再去判断有没有 相同类型的
      let sameType = arr.find((v) => v.type == row.type);
      //   @账号 选了某个账号  发布那里不能选相同的
      if (same) {
        let index = arr.findIndex((v) => v.id == same.id);
        this.step_3.account.value.splice(index, 1);
      } else {
        if (sameType) {
          this.$message("同一平台只能选择一个账号");
        } else {
          this.step_3.account.value.push(row);
        }
      }
    },
    // 获取我的账号列表
    async getMyUserList1() {
      this.loading = true;
      let filter = {};
      let op = {};
      for (let key in this.simpleForm) {
        if (this.simpleForm[key].value === "") {
          continue;
        }
        filter[key] = this.simpleForm[key].value;
        op[key] = this.simpleForm[key].op;
      }
      let res = await this.$api.wdzh_getData({
        page: this.currentPage,
        limit: this.limit,
        filter,
        op,
      });
      this.userList.push(...res.data);
      if (res.data.length) {
        this.currentPage++;
      } else {
        this.noMore = true;
      }
      this.loading = false;
    },
    // 获取账号市场发布 列表
    async getMyUserList2() {
      this.loading = true;
      let filter = {};
      let op = {};
      for (let key in this.simpleForm) {
        if (this.simpleForm[key].value === "") {
          continue;
        }
        filter[key] = this.simpleForm[key].value;
        op[key] = this.simpleForm[key].op;
      }
      let res = await this.$api.drsc_getData({
        page: this.currentPage,
        limit: this.limit,
        filter,
        op,
      });
      this.userList.push(...res.data);
      if (res.data.length) {
        this.currentPage++;
      } else {
        this.noMore = true;
      }
      this.loading = false;
    },
    scroll(e) {
      let clientHeight = e.target.clientHeight;
      let scrollTop = e.target.scrollTop;
      let scrollHeight = e.target.scrollHeight;
      if (clientHeight + scrollTop >= scrollHeight - 20) {
        if (!this.loading) {
          // 账号市场发布
          if (this.step_3.toggle.value.value == 1) {
            this.getMyUserList2();
          }
          // 我的账号发布
          if (this.step_3.toggle.value.value == 0) {
            this.getMyUserList1();
          }
        }
      }
    },

    // 下一步
    next() {
      this.activeTabVal++;
    },
    // 上一步
    prev() {
      this.activeTabVal--;
    },
    //  重置
    reset() {
      for (let key in this.step_1) {
        if (this.step_1[key].type == "input") {
          this.step_1[key].value = "";
        }
      }
      this.step_1.keywords.value = "";
      // 地点、小程序
      this.step_1.poi_name.value = "";
      this.step_1.app.list.micro_app_id.value = "";
      this.step_1.app.list.micro_app_title.value = "";
      this.step_1.app.list.micro_app_url.value = "";
      // 封面图 已选账号
      this.step_1.thumb.value = "";
      this.step_1.atuser.value = "";
      // step_2
      this.step_2.video.value = "";
      this.step_2.wyc_open.value = "";
      this.step_2.wyc_music.value = "";
      this.step_2.tpldata.hidden = true;
      window.sessionStorage.removeItem("tmpl");
      this.step_3.account.value = [];
      this.step_3.bilitid.value = "";
    },
    // 表单提交
    async confirm() {
      let form = {};
      Object.assign(form, this.step_1, this.step_2, this.step_3);
      // 校验表单必填项
      for (let key in form) {
        if (!form[key].required || form[key].hidden) {
          continue;
        }
        if (form[key].value == "") {
          return this.$message(form[key].toolTip);
        }
      }
      // 构造请求体数据
      let reqBody = {};
      let tmpl = window.sessionStorage.getItem("tmpl");
      if (this.step_2.tab.value == "muban" && !tmpl) {
        return this.$message("请上传AI视频");
      }
      if (this.step_2.tab.value == "muban" && tmpl) {
        reqBody.tpldata = JSON.parse(tmpl);
      }
      for (let key in form) {
        if (form[key].hidden) {
          continue;
        }
        if (key == "poi_name") {
          reqBody.poi_id =
            form[key].value && form[key].value.poi_id
              ? form[key].value.poi_id
              : "";
          reqBody.poi_name =
            form[key].value && form[key].value.poi_name
              ? form[key].value.poi_name
              : "";
          continue;
        }
        if (key == "app") {
          for (let k in form[key].list) {
            reqBody[k] = form[key].list[k].value;
          }
          continue;
        }
        if (key == "account") {
          let str = "";
          for (let i = 0; i < form[key].value.length; i++) {
            str = str + `[${form[key].value[i].id}],`;
          }
          reqBody.account = str.substr(0, str.length - 1);
          continue;
        }
        if (key == "wyc_open") {
          reqBody.wyc_open = form[key].value.value;
          continue;
        }
        if (key == "bilitid") {
          reqBody.bilitid = form[key].value[1];
          continue;
        }
        if (form[key].field) {
          reqBody[form[key].field] = form[key].value;
        }
      }
      console.log(reqBody, "请求体");
      reqBody.qt_json = "20210728";
      let res = await this.$api.wdsp_add(reqBody);
      console.log(res, "提示");
      this.$message(res.msg);
      if (res.code == "0") {
        this.reset();
        setTimeout(() => {
          window.sessionStorage.removeItem("tmpl");
          this.$router.push({ name: "wdsp" });
        }, 1000);
      }
    },
    async getChannelList() {
      let data = await this.$api.wdsp_getChannelList({
        type: "bilibili",
      });
      let arr = [];
      for (let key in data) {
        let obj = {};
        obj.label = data[key].name;
        obj.value = data[key].id;
        let children = [];
        for (let k in data[key].list) {
          children.push({
            label: data[key].list[k].name,
            value: data[key].list[k].tid,
            id: data[key].list[k].id,
          });
        }
        obj.children = children;
        arr.push(obj);
      }
      this.step_3.bilitid.list = arr;
    },
    // 我的账号发布 账号市场发布 筛选条件改变
    onInput(e, key) {
      this.simpleForm[key].value = e.target.value;
    },
    onSelect(val, key) {
      this.simpleForm[key].value = val;
    },
    search() {
      this.currentPage = 1;
      this.userList = [];

      let value = this.step_3.toggle.value.value;
      if (value == 0) {
        this.getMyUserList1();
      }
      if (value == 1) {
        this.getMyUserList2();
      }
    },
    goBack() {
      this.$router.push({ name: "wdsp" });
    },
    getType(type) {
      let re = option.vedioTypeList.find((v) => v.value == type);
      return re ? re.label : "";
    },
    getStatus(note, status) {
      // 异常
      if (note != "" && status == 0) {
        return false;
      } else {
        return true;
      }
    },
    getChecked(item) {
      let re = this.step_3.account.value.find((v) => v.id == item.id);
      return re ? true : false;
    },
  },
};
</script>

<style lang="less" scoped>
.wdsp {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 52px;
  box-sizing: border-box;
  background-color: #fff;
}

.tab-block {
  position: absolute;
  top: 52px;
  left: 50%;
  z-index: 10;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  padding: 40px 0px;
  box-sizing: border-box;
  .icon-close {
    position: absolute;
    right: 25px;
    top: 25px;
    color: #999;
    cursor: pointer;
    user-select: none;
    font-size: 18px;
  }
}
.vertical-tab-block {
  width: 100%;
  height: 30%;
  padding: 0 0 0 42px;
  box-sizing: border-box;
}
.tab-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 60px 0px 120px 0px;
  box-sizing: border-box;

  .vertical-tab-item {
    flex-grow: 1;
    display: flex;
    padding: 0px 120px;
    box-sizing: border-box;
    overflow: auto;
    height: 70%;
    .left {
      width: 50%;
      height: 100%;
    }
    .right {
      position: relative;
      padding-top: 48px;
      box-sizing: border-box;
      width: 50%;
      height: 100%;
    }
  }
}
.form-btn-list {
  position: absolute;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 120px;
  background-color: #fff;
  .button {
    width: 144px;
    height: 38px;
    margin-right: 32px;
  }
}
// simple form
.my-simple-form {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 60px;
  .search-block {
    .icon {
      font-size: 18px;
      color: #999;
      user-select: none;
      cursor: pointer;
    }
  }
  .input-block {
    display: flex;
    align-items: center;
    width: 150px;
    height: 100%;
    margin-right: 15px;

    .input {
      width: 100%;
      height: 32px;
      border-radius: 5px;
      padding: 0 8px;
      box-sizing: border-box;
      color: #333;
      font-size: 14px;
      outline: none;
      border: 1px solid #d7d7d7;
      &::-webkit-input-placeholder {
        color: #808595;
        font-size: 14px;
      }
      &:-moz-placeholder {
        color: #808595;
        font-size: 14px;
      }
      &::-moz-placeholder {
        color: #808595;
        font-size: 14px;
      }
      &:-ms-input-placeholder {
        color: #808595;
        font-size: 14px;
      }
    }
    .label {
      display: flex;
      align-items: center;
      .text {
        width: 90px;
        color: #333;
        font-size: 14px;
        text-align: right;
        white-space: nowrap;
      }
    }
  }
  .select-block {
    display: flex;
    align-items: center;
    width: 150px;
    height: 32px;
    margin-right: 15px;
    /deep/ .el-select {
      width: 100%;
      height: 100%;
      .el-input {
        height: 100%;
        .el-input__inner {
          height: 100%;
          border: 1px solid #e7e7e7;
        }
        .el-input__icon {
          line-height: normal;
        }
      }
    }
  }
  .button {
    margin-left: 15px;
  }
  .label {
    color: #333;
    font-size: 14px;
  }
}
// user list
.user-list {
  flex-shrink: 1;
  width: 100%;
  height: 100%;
  padding: 0 5px;
  box-sizing: border-box;
  overflow: auto;
  .list-item {
    display: flex;
    border-bottom: 1px solid #eee;
    padding: 20px 0;
  }
  .user-avatar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 100%;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
  .user-info {
    position: relative;
    flex: 1;
    height: 100%;
    .user-name {
      color: #333;
      font-size: 12px;
      margin-bottom: 8px;
    }
    .user-row {
      display: flex;
      align-items: center;
      .line {
        width: 2px;
        height: 12px;
        background-color: #eee;
        margin: 0 25px;
      }
      .text {
        color: #808595;
        font-size: 12px;
      }
      .circle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        margin: 0 15px;
      }
      .suc {
        background-color: #299a89;
      }
      .err {
        background-color: #bd1e1e;
      }
    }
    .mark {
      position: absolute;
      top: 50%;
      right: 50px;
      transform: translate(0, -50%);
      width: 11px;
      height: 11px;
      border: 1.5px solid #999;
      border-radius: 2px;
      user-select: none;
      cursor: pointer;
      .icon {
        position: absolute;
        top: -5px;
        right: -5px;
        color: #999;
        font-size: 18px;
      }
    }
  }
}

// 弹窗
.el-dialog__wrapper {
  /deep/ .el-dialog__header {
    padding: 0;
  }
  /deep/ .el-dialog__body {
    padding: 0;
    .header {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      padding: 0px 20px 0px 35px;
      box-sizing: border-box;
      border-bottom: 1px solid #e7e7e7;
      .label {
        color: #000;
        font-size: 20px;
        font-weight: bold;
      }
      .icon-close {
        color: #999;
        font-size: 20px;
        user-select: none;
        cursor: pointer;
      }
    }
    .body {
      width: 100%;
      padding: 0px 35px 0px 35px;
      box-sizing: border-box;
      .search-block {
        display: flex;
        align-items: center;
        width: 100%;
        height: 80px;
        .form-item {
          margin-right: 15px;
        }
        .button {
          height: 30px;
        }
      }
      .place-list {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 400px;
        overflow: auto;
        .list-item {
          display: flex;
          align-items: center;
          padding: 15px 20px;
          box-sizing: border-box;
          cursor: pointer;
          &:hover {
            background-color: #f4f7fc;
          }
          .radio {
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 1px solid #ccc;
            transition: all 0.1s;
            margin-right: 15px;
            &:hover {
              border: 1px solid #387CF7;
            }
          }
          .label {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            .name {
              width: 40%;
            }
            .city {
              width: 55%;
            }
          }
        }
        .active {
          position: relative;
          background-color: #387CF7;
          &::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background-color: #ffffff;
          }
        }
      }
    }
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 80px;
      .button {
        width: 122px;
      }
    }
  }
  /deep/ .el-dialog__footer {
    padding: 0;
  }
}
</style>
